<template>
    <div class="tags">
        <el-tag class="tag" v-for="(tab,index) in tabs" :key="tab.path"  
        :type="$store.state.set.tagType"
        :effect="$route.path === tab.path? 'dark':'plain' " 
        :closable="tab.path !=='/home'" 
        @click="MenuTo(tab)"
        @close="MenuClose(tab,index)"
        >
            {{tab.label}}
        </el-tag>
    </div>
</template>
<script>
    import {useStore} from 'vuex'
    import {useRouter,useRoute} from 'vue-router';
    export default{
        name:'CommonTag',
        setup() {
            const store = useStore();
            const router = useRouter();
            const route = useRoute();
            let tabs = store.state.menu.tabs;
            // 点击tag跳转到指定menu
            let MenuTo = function (tab) {
                router.push(tab.path)
            }
            //删除tag
            let MenuClose = function(tab,index){
                store.commit('DeleteTab',tab)
                if(tab.path === route.path){
                    router.push(tabs[index-1].path)
                }
            }
            return {
                tabs,
                MenuTo,
                MenuClose
            }
        },
    }
</script>
<style scoped> 
.tags{
    margin-top: 10px;
    margin-left: 20px;
}
.tag{
    margin-right: 10px;
    cursor: pointer;
}
</style>